<%@ page contentType="text/html;charset=UTF-8"%>

<div class="rap-page-area" id="rap-page-area-list-shouldPay">
	<div class="col-md-12 col-sm-12 rap-layout-main">
		<div class="row rap-toolbar">
		<shiro:hasPermission name="stwy:lease:rent:rent"> 
			<button id="rap-btn-rent">
				<i class="fa fa-edit"></i> 收取租金
			</button>
		</shiro:hasPermission>
			<button id="rap-btn-rent-refresh">
				<i class="fa fa-refresh"></i> 刷新
			</button>
			<button id="rap-btn-rent-save" type="button">
				<i class="fa fa-save"></i> 保存
			</button>
			<button id="rap-btn-rent-cancel" type="button">
				<i class="fa fa-times"></i> 取消
			</button>
		</div>
		<form id="rap-form-shouldPay">
			<input type='hidden' name='search_IN_groupOne' class="stwy_search_groupOne">
			<input type='hidden' name='search_IN_groupTwo' class="stwy_search_groupTwo">
		</form>
		<div class="row">
		<form id="rap-rent-form">
			<table id="rap-table-list-shouldPay" class="rap-table rap-table-list rap-paste">
				<thead>
					<tr>
						<th><label><input type="checkbox"
								class="rap-table-checkbox group-checkable"
								data-set="#rap-table-list .checkboxes" /><span class="lbl"></span></label>
						</th>
						<th>合同编号</th>
						<th>承租人</th>
						<th>支付类型</th>
						<th>租金日起</th>
						<th>
						租金日止
						<span class='rap-info' data-toggle='popover' data-placement='right' onclick='popover(this);' data-content='如果有补交租金或预付租金，请务必调整该日期' ><i class='icon-info font-blue'></i></span>
						</th>
						<th>应缴日期</th>
						<th>应缴租金</th>
						
						<th>补交租金</th>
						<th>预付租金</th>
						
						<th>实际收缴日期</th>
						<th>实际收缴金额</th>
						<th>结余</th>
						<!-- <th>历史欠费合计</th> -->
						<th>本月交保证金</th>
						<th>备注</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
	</form>
		</div>
	</div>
</div>
<script type="text/javascript">
var _shouldPayList;
var _shouldPayCols= [{
	data : "uuid",
	orderable : false,
	className : "center",
	width : "30",
	render : RapDataTableUtils.renderCheckCol
},
{
	data : 'contract.contractNum',
	width : "80",
	render : function(data, type, full){
		return "<a href='#' onclick='onViewContract(this,\""+full.contract.uuid+"\");'>"+data+"</a>";
	},
	orderable : false
},
{
	data : 'contract.custom.theName',
	width : "120",
	//render : function(data, type, full){},
	orderable : false
},
{
	data : 'contract.payType',
	width : "50",
	render : function(data, type, full){
		return RapDataUtils.getEnumName("stwy_payType", data);
	},
	orderable : false
},
{
	data : 'beginDate',
	width : "100",
	//render : function(data, type, full){},
	orderable : false
},
{
	data : 'endDate',
	width : "150",
	className:"edit",
	//render : function(data, type, full){},
	orderable : false
},
{
	data : 'shouldPayDate',
	width : "100",
	orderable : false
},
{
	data : 'shouldPayMoney',
	width : "100",
	className:"rap-td-number",
	render:milliFormat,
	orderable : false
},
{
	data : 'repayMoney',
	width : "100",
	className:"edit rap-td-number",
	render:milliFormat,
	orderable : false
},
{
	data : 'prepayMoney',
	width : "100",
	className:"edit rap-td-number",
	render:milliFormat,
	orderable : false
},
{
	data : 'payDate',
	width : "100",
	className:"edit",
	//render : function(data, type, full){},
	orderable : false
},
{
	data : 'money',
	width : "100",
	className:"edit rap-td-number",
	orderable : false
},
{
	data : 'leave',
	width : "200",
	className:"edit rap-td-number",
	orderable : false
}, 
{
	data : 'depositNow',
	width : "100",
	className:"edit",
	orderable : false
},
{
	data : 'remark',
	width : "200",
	className:"edit",
	orderable : false
}
]
;
function renderAction(data, type, full){
	return "<div class='rap-btn-actiongroup'>" 
	+ "<button id='rap-btn-edit-row' class='btn btn-xs btn-info' data-rel='tooltip' title='查看'>收租</button>"
	+ "</div>";
}
function setActions(nRow, aData, iDataIndex){
	$('#rap-btn-edit-row', nRow).click(function() {
		editRow(nRow);
	});
}
function loadShouldPayRecords(){
	var queryData = $("#rap-form-shouldPay").serializeArray();
	$.ajax({
		url : "${serviceurl}/findToPayRecords",
		data : queryData,
		dataType : 'json',
		success : function(data) {
			if(data.success){
				_shouldPayList.clear();
				_shouldPayList.rows.add(data.records);
				_shouldPayList.draw();
			}else{
				alert(data.msg);
			}
			
		}
	});
}
function onRent(){
	var rows = RapDataTableUtils.getSelectedTr("rap-table-list-shouldPay");
	if(rows==null||rows.length==0){
		alert("请选择待收取租金的记录");
		return false;
	}
	intoEditMode();
	for(var i =0;i<rows.length;i++){
		editRow(rows[i]);
	}
}
function editRow(row){
	var aData = _shouldPayList.row(row).data();
	var jqTds = $('td.edit', row);
	jqTds[0].innerHTML = '<input name="endDate[]" type="text" class="form-control rap-input-date" value="'+aData.endDate+'" >';
	jqTds[1].innerHTML = '<input name="repayMoney[]" type="text"  class="form-control number" value="'+aData.repayMoney+'" >';
	jqTds[2].innerHTML = '<input name="prepayMoney[]" type="text"  class="form-control number" value="'+aData.prepayMoney+'">';
    jqTds[3].innerHTML = '<input name="uuid[]" type="hidden"  value="' + aData.uuid + '">'
    +'<input name="payDate[]" type="text" class="form-control rap-input-date"  >';
    jqTds[4].innerHTML = '<input name="money[]" type="text"  class="form-control number" value="'+aData.money+'">';
    jqTds[5].innerHTML = '<input name="leave[]" type="text"  class="form-control number" value="'+aData.leave+'">';
    jqTds[6].innerHTML = '<input name="depositNow[]" type="text"  class="form-control number" >';
    jqTds[7].innerHTML = '<textarea name="remark[]"  class="form-control" rows="1">'+(aData.remark==null?'':aData.remark)+'</textarea>';
    _rapui.setUIStyle();
    $("input",jqTds[1]).bind('blur input propertychange',function(){
    	calActualMoney(row,aData.shouldPayMoney);
    	//结余
    	$("input[name='leave[]']",row).val(aData.money-shouldPayMoney);
    });
    $("input",jqTds[2]).bind('blur input propertychange',function(){
    	calActualMoney(row,aData.shouldPayMoney);
    	//结余
    	$("input[name='leave[]']",row).val(aData.money-shouldPayMoney);
    });
    $("input",jqTds[4]).bind('blur input propertychange',function(){
    	var money = parseFloat(this.value);
    	$("input[name='leave[]']",row).val(money-aData.shouldPayMoney);
    });
    calActualMoney(row,aData.shouldPayMoney);
}
function calActualMoney(row,shouldPayMoney){
	var repay =$("input[name='repayMoney[]']",row).val();
	var prepay = $("input[name='prepayMoney[]']",row).val();
	try{
		repay = parseFloat(repay);
	}catch(e){
		repay=0;
	}
	try{
		prepay = parseFloat(prepay);
	}catch(e){
		prepay=0;
	}
	var money = repay+prepay+shouldPayMoney;
	//实际
	$("input[name='money[]']",row).val(money);
}
function intoEditMode(){
	$("#rap-btn-rent-save").removeClass("hide");
	$("#rap-btn-rent-cancel").removeClass("hide");
	$("#rap-btn-rent").addClass("hide");
	$("#rap-btn-rent-refresh").addClass("hide");
}
function intoViewMode(){
	$("#rap-btn-rent-save").addClass("hide");
	$("#rap-btn-rent-cancel").addClass("hide");
	$("#rap-btn-rent").removeClass("hide");
	$("#rap-btn-rent-refresh").removeClass("hide");
}
function onRefreshShouldPay(){
	loadShouldPayRecords();
}
function checkInput(){
	var result =true;
	$('#rap-rent-form input:not([type="search"])').each(function(){
		clearInputError(this);
		if(this.value==''){
			showInputError(this,"不能为空");
			result=false;
		}else{
			if($(this).hasClass("number")){
				if(!checkDecimal(this.value)){
					showInputError(this,"请输入数字");
					result=false;
				}
			}
		}
	});
	return result;
}
function clearInputError(obj){
	$(obj).removeClass("error");
	$(obj).next("span.error").remove();
}
function showInputError(obj,errorInfo){
	$(obj).addClass("error");
	$(obj).after('<span for="'+$(obj).name+'" class="error">'+errorInfo+'</span>');
}
function onSaveRent(){
	var result = checkInput();
	if(result==false){
		return;
	}
	var formData = $('#rap-rent-form').serialize();
	$.ajax({
		url : "${serviceurl}/saveRents",
		data : formData,
		dataType : 'json',
		success : function(data) {
			if(data.success){
				alert("保存成功");
				intoViewMode();
				onRefreshShouldPay();
			}else{
				alert(data.msg);
			}
			
		}
	});
}
$(document).ready(function() {
	_shouldPayList = $('#rap-table-list-shouldPay').DataTable({
		"columns" : _shouldPayCols,
		"createdRow" : setActions,
		"order": [] 
	});
	loadShouldPayRecords();
	
	intoViewMode();
	$("#rap-btn-rent").bind('click',function(){
		onRent();
	});
	$("#rap-btn-rent-refresh").bind('click',function(){
		onRefreshShouldPay();
	});
	$("#rap-btn-rent-save").bind('click',function(){
		onSaveRent();
	});
	$("#rap-btn-rent-cancel").bind('click',function(){
		intoViewMode();
		onRefreshShouldPay();
	});
	$("#hasPay-tab").bind('click',function(){
		onRefresh();
	});
});
</script>